<template>

  <div class="container4">

    <el-row style="height: 10%">
      <el-col :span="24">
        <div class="grid-content bg-purple-dark">
          <div style="letter-spacing: 1rem;color: ghostwhite;font-weight: bold;font-size:3.2rem;text-align: center;">
            线圈车间生产管理大屏
          </div>
        </div>
      </el-col>
    </el-row>

    <el-row style="height: 50%">

      <el-col :span="8" style="margin: 1rem;width: 38vw;height: 40vh;">
        <div>
          <div style="text-align: center;color: white;font-size: 1.0rem;font-weight: bold;">
            工单一周未下达提醒
          </div>

          <div style="font-size: x-small;padding-left: 2rem;padding-top: 0.5rem;color:white;">

            <el-row>
              <el-col :span="4">
                <div style="position: relative;left: 1.6rem;">工单号</div>
              </el-col>
              <el-col :span="6">
                <div style="position: relative;left: 3.6rem;">品名</div>
              </el-col>
              <el-col :span="3">
                <div style="position: relative;right: 1rem;">创建时间</div>
              </el-col>
              <el-col :span="3">
                <div style="position: relative;">齐套数</div>
              </el-col>
              <el-col :span="3">
                <div style="position: relative;right: 1rem;">下达数量</div>
              </el-col>
              <el-col :span="2">
                <div style="position: relative;right: 1rem;">超出时间</div>
              </el-col>
              <el-col :span="3">
                <div style="position: relative;">未下达数量</div>
              </el-col>
            </el-row>

          </div>

          <div ref="tableContent20" class="table-content">
            <template v-for="(item, index) in shopOrderWeekNoPush">
              <div class="table-line content-line" v-if="">
                <div
                    style="text-align: center;font-size: 80%;padding-top: 0.5rem;padding-bottom: 0.3rem;letter-spacing: 0.1rem;">
                  <el-row>
                    <el-col :span="4">
                      <div>{{ item.shopOrder }}</div>
                    </el-col>
                    <el-col :span="6">
                      <div>{{ item.itemName }}</div>
                    </el-col>
                    <el-col :span="3">
                      <div style="position: relative;right: 1.5rem;">{{ item.createDate}}</div>
                    </el-col>
                    <el-col :span="3">
                      <div style="position: relative;right: 1rem;">{{ item.completeSetQty }}</div>
                    </el-col>
                    <el-col :span="3">
                      <div style="position: relative;right: 1.6rem;">{{ item.releaseQty }}</div>
                    </el-col>
                    <el-col :span="2">
                      <div style="position: relative;right: 1rem;">{{ item.overdue }}</div>
                    </el-col>
                    <el-col :span="3">
                      <div style="position: relative;right: 0.8rem;">{{ item.noReleasedQty }}</div>
                    </el-col>
                  </el-row>
                </div>
              </div>
            </template>
          </div>
        </div>
      </el-col>


      <el-col :span="8" style="margin: 1rem;width: 26vw;height: 40vh;">
        <div>
          <div style="text-align: center;color: white;font-size: 1.0rem;font-weight: bold;">
            计划下达未入库提醒
          </div>

          <div style="font-size: x-small;padding-left: 2rem;padding-top: 0.5rem;color:white;">

            <el-row>
              <el-col :span="5">
                <div style="position: relative;left: 1.6rem;">工单号</div>
              </el-col>
              <el-col :span="7">
                <div style="position: relative;left: 3.6rem;">品名</div>
              </el-col>
              <el-col :span="4">
                <div style="position: relative;right: 1rem;">工单下达数</div>
              </el-col>
              <el-col :span="4">
                <div style="position: relative;right: 1rem;">可打印数量</div>
              </el-col>
              <el-col :span="4">
                <div style="position: relative;">入库数</div>
              </el-col>
            </el-row>

          </div>

          <div ref="tableContent21" class="table-content">
            <template v-for="(item, index) in shopOrderPlanNoStock">
              <div class="table-line content-line" v-if="">
                <div
                    style="text-align: center;font-size: 80%;padding-top: 0.5rem;padding-bottom: 0.3rem;letter-spacing: 0.1rem;">
                  <el-row>
                    <el-col :span="5">
                      <div>{{ item.shopOrder }}</div>
                    </el-col>
                    <el-col :span="7">
                      <div style="position: relative;left: 1rem;">{{ item.itemName }}</div>
                    </el-col>
                    <el-col :span="4">
                      <div style="position: relative;right: 0.8rem;">{{ item.releasedQty }}</div>
                    </el-col>
                    <el-col :span="4">
                      <div style="position: relative;right: 1rem;">{{ item.canPrintQty }}</div>
                    </el-col>
                    <el-col :span="4">
                      <div style="position: relative;right: 1.2rem;">{{ item.eprStockQty }}</div>
                    </el-col>
                  </el-row>
                </div>
              </div>
            </template>
          </div>
        </div>
      </el-col>

      <el-col :span="8" style="margin: 1rem;width: 30vw;height: 40vh;">
        <div>
          <div style="text-align: center;color: white;font-size: 1.0rem;font-weight: bold;">
            线圈不良登记当日记录
          </div>

          <div style="font-size: x-small;padding-left: 2rem;padding-top: 0.5rem;color:white;">

            <el-row>
              <el-col :span="4">
                <div style="position: relative;right: 1rem;">登记人员</div>
              </el-col>
              <el-col :span="4">
                <div style="position: relative;right: 1.3rem;">品名</div>
              </el-col>
              <el-col :span="8">
                <div style="position: relative;left: 4rem;">规格</div>
              </el-col>
              <el-col :span="5">
                <div style="position: relative;left: 1.5rem;">不良原因</div>
              </el-col>
              <el-col :span="3">
                <div style="position: relative;right: 0.6rem;">不良数量</div>
              </el-col>
            </el-row>

          </div>

          <div ref="tableContent22" class="table-content">
            <template v-for="(item, index) in coliNcReasonRegister">
              <div class="table-line content-line" v-if="">
                <div
                    style="text-align: center;font-size: 80%;padding-top: 0.5rem;padding-bottom: 0.3rem;letter-spacing: 0.1rem;">
                  <el-row>
                    <el-col :span="4">
                      <div style="position: relative;right: 1.2rem;">{{ item.realName }}</div>
                    </el-col>
                    <el-col :span="4">
                      <div style="position: relative;right: 1.6rem;">{{ item.itemName }}</div>
                    </el-col>
                    <el-col :span="8">
                      <div style="position: relative;right: 0.8rem;">{{ item.itemDesc }}</div>
                    </el-col>
                    <el-col :span="5">
                      <div style="position: relative;right: 1rem;padding-left: 2.5rem;">{{ item.ncDesc }}</div>
                    </el-col>
                    <el-col :span="3">
                      <div style="position: relative;right: 1.2rem;">{{ item.ncQty }}</div>
                    </el-col>
                  </el-row>
                </div>
              </div>
            </template>
          </div>
        </div>
      </el-col>

    </el-row>


    <el-row style="height: 40%">

      <el-col :span="8">
        <div>
          <SimEcharts :chart-data="pillarData3"></SimEcharts>
        </div>
      </el-col>


      <el-col :span="8" style="width: 38vw;height: 40vh;">
        <div>
          <div style="text-align: center;color: white;font-size: 1.0rem;font-weight: bold;">
            当天下达计划提醒
          </div>

          <div style="font-size: x-small;padding-left: 2rem;padding-top: 0.5rem;color:white;">

            <el-row>
              <el-col :span="5">
                <div style="position: relative;left: 1rem;">工单号</div>
              </el-col>
              <el-col :span="4">
                <div style="position: relative;left: 2rem;">品名</div>
              </el-col>
              <el-col :span="8">
                <div style="position: relative;left: 2.8rem;">规格</div>
              </el-col>
              <el-col :span="2">
                <div style="position: relative;right: 1rem;">工单下达数</div>
              </el-col>
              <el-col :span="3">
                <div style="position: relative;">当前工序</div>
              </el-col>
              <el-col :span="2">
                <div style="position: relative;right: 1rem;">可打印标签数</div>
              </el-col>
            </el-row>

          </div>

          <div ref="tableContent23" class="table-content">
            <template v-for="(item, index) in releasePlanTheDay">
              <div class="table-line content-line" v-if="">
                <div
                    style="text-align: center;font-size: 80%;padding-top: 0.5rem;padding-bottom: 0.3rem;letter-spacing: 0.1rem;">
                  <el-row>
                    <el-col :span="5">
                      <div>{{ item.shopOrder }}</div>
                    </el-col>
                    <el-col :span="4">
                      <div style="position: relative;left: 1rem;">{{ item.itemName }}</div>
                    </el-col>
                    <el-col :span="8">
                      <div style="position: relative;">{{ item.itemDesc }}</div>
                    </el-col>
                    <el-col :span="2">
                      <div style="position: relative;right: 0.8rem;">{{ item.releasedQty }}</div>
                    </el-col>
                    <el-col :span="3">
                      <div style="position: relative;right: 1rem;">{{ item.operationName }}</div>
                    </el-col>
                    <el-col :span="2">
                      <div style="position: relative;right: 1.2rem;">{{ item.canPrintQty }}</div>
                    </el-col>
                  </el-row>
                </div>
              </div>
            </template>
          </div>
        </div>
      </el-col>

      <el-col :span="8" style="margin: 1rem;width: 26vw;height: 40vh;">
        <div>
          <div style="text-align: center;color: white;font-size: 1.0rem;font-weight: bold;">
            当天完工入库提醒
          </div>

          <div style="font-size: x-small;padding-left: 2rem;padding-top: 0.5rem;color:white;">

            <el-row>
              <el-col :span="6">
                <div style="position: relative;">工单号</div>
              </el-col>
              <el-col :span="6">
                <div style="position: relative;left: 1rem;">sfc</div>
              </el-col>
              <el-col :span="6">
                <div style="position: relative;left: 1.6rem;">品名</div>
              </el-col>
              <el-col :span="2">
                <div style="position: relative;right: 1.6rem;">标签数</div>
              </el-col>
              <el-col :span="2">
                <div style="position: relative;right: 1.2rem;">入库数</div>
              </el-col>
              <el-col :span="2">
                <div style="position: relative;right: 1rem;">不良数</div>
              </el-col>
            </el-row>

          </div>

          <div ref="tableContent24" class="table-content">
            <template v-for="(item, index) in inStockTheDay">
              <div class="table-line content-line" v-if="">
                <div
                    style="text-align: center;font-size: 80%;padding-top: 0.5rem;padding-bottom: 0.3rem;letter-spacing: 0.1rem;">
                  <el-row>
                    <el-col :span="6">
                      <div style="white-space:pre-wrap;">{{ item.shopOrder }}</div>
                    </el-col>
                    <el-col :span="6">
                      <div>{{ item.sfc }}</div>
                    </el-col>
                    <el-col :span="6">
                      <div style="position: relative;right: 0.5rem;">{{ item.itemName }}</div>
                    </el-col>
                    <el-col :span="2">
                      <div style="position: relative;right: 1rem;">{{ item.sfcQty }}</div>
                    </el-col>
                    <el-col :span="2">
                      <div style="position: relative;right: 1rem;">{{ item.eprStockQty }}</div>
                    </el-col>
                    <el-col :span="2">
                      <div style="position: relative;right: 1.2rem;">{{ item.ncQty }}</div>
                    </el-col>
                  </el-row>
                </div>
              </div>
            </template>
          </div>
        </div>
      </el-col>

    </el-row>


  </div>

</template>

<script>
import {closeWebsocket, connectWebsocket, sendMessage} from "@/api/websocket";
import {peopleAttendance} from "@/api/service-module/dashBoard/echartsData";

export default {
  name: "LineCircleScreenDashBoard",
  data() {
    return {
      pillarData3: JSON.parse(JSON.stringify(peopleAttendance)),
      shopOrderWeekNoPush: [
        {
          shopOrder: 'D-GD022125215432',
          itemName: '单相50Hz线圈',
          createDate: '2022-07-12 09:56:56',
          completeSetQty: '630',
          releaseQty: '630',
          overdue: '1d',
          noReleasedQty: '210',
        },
        {
          shopOrder: 'D-GD022125215432',
          itemName: '单相50Hz线圈',
          createDate: '2022-07-12 09:56:56',
          completeSetQty: '630',
          releaseQty: '630',
          overdue: '1d',
          noReleasedQty: '210',
        },
        {
          shopOrder: 'D-GD022125215432',
          itemName: '单相50Hz线圈',
          createDate: '2022-07-12 09:56:56',
          completeSetQty: '630',
          releaseQty: '630',
          overdue: '1d',
          noReleasedQty: '210',
        },
        {
          shopOrder: 'D-GD022125215432',
          itemName: '单相50Hz线圈',
          createDate: '2022-07-12 09:56:56',
          completeSetQty: '630',
          releaseQty: '630',
          overdue: '1d',
          noReleasedQty: '210',
        },
        {
          shopOrder: 'D-GD022125215432',
          itemName: '单相50Hz线圈',
          createDate: '2022-07-12 09:56:56',
          completeSetQty: '630',
          releaseQty: '630',
          overdue: '1d',
          noReleasedQty: '210',
        },
        {
          shopOrder: 'D-GD022125215432',
          itemName: '单相50Hz线圈',
          createDate: '2022-07-12 09:56:56',
          completeSetQty: '630',
          releaseQty: '630',
          overdue: '1d',
          noReleasedQty: '210',
        },
        {
          shopOrder: 'D-GD022125215432',
          itemName: '单相50Hz线圈',
          createDate: '2022-07-12 09:56:56',
          completeSetQty: '630',
          releaseQty: '630',
          overdue: '1d',
          noReleasedQty: '210',
        }
      ],
      shopOrderPlanNoStock: [
        {
          shopOrder: 'D-GD022125215432',
          itemName: '三相60Hz线圈',
          releasedQty: '300',
          canPrintQty: '270',
          eprStockQty: '180',
        },
        {
          shopOrder: 'D-GD022125215432',
          itemName: '三相60Hz线圈',
          releasedQty: '300',
          canPrintQty: '270',
          eprStockQty: '180',
        },
        {
          shopOrder: 'D-GD022125215432',
          itemName: '三相60Hz线圈',
          releasedQty: '300',
          canPrintQty: '270',
          eprStockQty: '180',
        },
        {
          shopOrder: 'D-GD022125215432',
          itemName: '三相60Hz线圈',
          releasedQty: '300',
          canPrintQty: '270',
          eprStockQty: '180',
        },
        {
          shopOrder: 'D-GD022125215432',
          itemName: '三相60Hz线圈',
          releasedQty: '300',
          canPrintQty: '270',
          eprStockQty: '180',
        },
        {
          shopOrder: 'D-GD022125215432',
          itemName: '三相60Hz线圈',
          releasedQty: '300',
          canPrintQty: '270',
          eprStockQty: '180',
        },
        {
          shopOrder: 'D-GD022125215432',
          itemName: '三相60Hz线圈',
          releasedQty: '300',
          canPrintQty: '270',
          eprStockQty: '180',
        },
      ],
      coliNcReasonRegister: [
        {
          realName: '石超',
          itemName: '三相50Hz线圈',
          itemDesc: '220V_铜线_Φ70*Φ39_550P_3SD_Φ0.63*2-Y',
          ncDesc: '断线',
          ncQty: '1',
        },
        {
          realName: '石超',
          itemName: '三相50Hz线圈',
          itemDesc: '220V_铜线_Φ70*Φ39_550P_3SD_Φ0.63*2-Y',
          ncDesc: '断线',
          ncQty: '1',
        },
        {
          realName: '石超',
          itemName: '三相50Hz线圈',
          itemDesc: '220V_铜线_Φ70*Φ39_550P_3SD_Φ0.63*2-Y',
          ncDesc: '断线',
          ncQty: '1',
        },
        {
          realName: '石超',
          itemName: '三相50Hz线圈',
          itemDesc: '220V_铜线_Φ70*Φ39_550P_3SD_Φ0.63*2-Y',
          ncDesc: '断线',
          ncQty: '1',
        },
        {
          realName: '石超',
          itemName: '三相50Hz线圈',
          itemDesc: '220V_铜线_Φ70*Φ39_550P_3SD_Φ0.63*2-Y',
          ncDesc: '断线',
          ncQty: '1',
        },
        {
          realName: '石超',
          itemName: '三相50Hz线圈',
          itemDesc: '220V_铜线_Φ70*Φ39_550P_3SD_Φ0.63*2-Y',
          ncDesc: '断线',
          ncQty: '1',
        },
      ],
      releasePlanTheDay: [
        {
          shopOrder: 'D-GD0221252154',
          itemName: '三相50Hz线圈',
          itemDesc: '220V_铜线_Φ70*Φ39_550P_3SD_Φ0.63*2-库存处理',
          releasedQty: '300',
          operationName: '自动嵌线',
          canPrintQty: '180',
        },
        {
          shopOrder: 'D-GD0221252154',
          itemName: '三相50Hz线圈',
          itemDesc: '220V_铜线_Φ70*Φ39_550P_3SD_Φ0.63*2-库存处理',
          releasedQty: '300',
          operationName: '自动嵌线',
          canPrintQty: '180',
        },
        {
          shopOrder: 'D-GD0221252154',
          itemName: '三相50Hz线圈',
          itemDesc: '220V_铜线_Φ70*Φ39_550P_3SD_Φ0.63*2-库存处理',
          releasedQty: '300',
          operationName: '自动嵌线',
          canPrintQty: '180',
        },
        {
          shopOrder: 'D-GD0221252154',
          itemName: '三相50Hz线圈',
          itemDesc: '220V_铜线_Φ70*Φ39_550P_3SD_Φ0.63*2-库存处理',
          releasedQty: '300',
          operationName: '自动嵌线',
          canPrintQty: '180',
        },
        {
          shopOrder: 'D-GD0221252154',
          itemName: '三相50Hz线圈',
          itemDesc: '220V_铜线_Φ70*Φ39_550P_3SD_Φ0.63*2-库存处理',
          releasedQty: '300',
          operationName: '自动嵌线',
          canPrintQty: '180',
        },
      ],
      inStockTheDay: [
        {
          shopOrder: 'D-GD02220317081',
          sfc: 'D-02JC220428115',
          itemName: '单相50Hz线圈',
          sfcQty: '1',
          eprStockQty: '1',
          ncQty: '0'
        },
        {
          shopOrder: 'D-GD02220317081',
          sfc: 'D-02JC220428115',
          itemName: '单相50Hz线圈',
          sfcQty: '1',
          eprStockQty: '1',
          ncQty: '0'
        },
        {
          shopOrder: 'D-GD02220317081',
          sfc: 'D-02JC220428115',
          itemName: '单相50Hz线圈',
          sfcQty: '1',
          eprStockQty: '1',
          ncQty: '0'
        },
        {
          shopOrder: 'D-GD02220317081',
          sfc: 'D-02JC220428115',
          itemName: '单相50Hz线圈',
          sfcQty: '1',
          eprStockQty: '1',
          ncQty: '0'
        },
        {
          shopOrder: 'D-GD02220317081',
          sfc: 'D-02JC220428115',
          itemName: '单相50Hz线圈',
          sfcQty: '1',
          eprStockQty: '1',
          ncQty: '0'
        },
        {
          shopOrder: 'D-GD02220317081',
          sfc: 'D-02JC220428115',
          itemName: '单相50Hz线圈',
          sfcQty: '1',
          eprStockQty: '1',
          ncQty: '0'
        },
        {
          shopOrder: 'D-GD02220317081',
          sfc: 'D-02JC220428115',
          itemName: '单相50Hz线圈',
          sfcQty: '1',
          eprStockQty: '1',
          ncQty: '0'
        }
      ],
      array:[]
    }
  },
  methods: {
    reloadWeb() {
      //每隔8小时刷新一下页面，防止卡死
      setTimeout(location.reload, 1000 * 60 * 60 * 8)
    },
    initWebData() {
      connectWebsocket(
          // 测试地址
          process.env.VUE_APP_WS_URL + '/ProduceManagerScreen/WorkShopProduct',
          //'ws://192.168.12.24:20088/ProduceManagerScreen/WorkShopProduct',
          // 传递给后台的数据
          {},
          // 成功拿到后台返回的数据的回调函数
          (data) => {
            let dataJson = JSON.parse(data)
            this.shopOrderWeekNoPush = dataJson.selectShopOrderWeekNotReleased
            this.shopOrderPlanNoStock = dataJson.selectPlanArrivedNoStocked
            this.coliNcReasonRegister = dataJson.selectColiNcRegisterToDay
            this.releasePlanTheDay = dataJson.selectTodayReleasedPlan
            this.inStockTheDay = dataJson.selectTodayFinishedWorkAndStock

            for (let key in dataJson.selectPeopleWorkRateTheDay) {
              if (this.array.length < 3) {
                this.array.push(key)
              }
            }
            this.pillarData3.xAxis.data = this.array

            this.pillarData3.series[0].data[0] = dataJson.selectPeopleWorkRateTheDay['线圈组'][0]
            this.pillarData3.series[1].data[0] = dataJson.selectPeopleWorkRateTheDay['线圈组'][1]
            this.pillarData3.series[2].data[0] = dataJson.selectPeopleWorkRateTheDay['线圈组'][2]

            this.pillarData3.series[0].data[1] = dataJson.selectPeopleWorkRateTheDay['嵌线组'][0]
            this.pillarData3.series[1].data[1] = dataJson.selectPeopleWorkRateTheDay['嵌线组'][1]
            this.pillarData3.series[2].data[1] = dataJson.selectPeopleWorkRateTheDay['嵌线组'][2]

            this.pillarData3.series[0].data[2] = dataJson.selectPeopleWorkRateTheDay['浸漆组'][0]
            this.pillarData3.series[1].data[2] = dataJson.selectPeopleWorkRateTheDay['浸漆组'][1]
            this.pillarData3.series[2].data[2] = dataJson.selectPeopleWorkRateTheDay['浸漆组'][2]


          },
          () => {
            sendMessage("Im tired!")
          }
      )
    },
    initData() {
      this.pillarData3.title.text = '人员出勤'
      this.pillarData3.title.textStyle.fontSize = '20'
      this.pillarData3.title.textStyle.color = '#fffffb'

      this.pillarData3.xAxis.data = ['线圈组', '嵌线组', '浸漆组']
      this.pillarData3.series[0].data = [90, 120, 100]
      this.pillarData3.series[1].data = [60, 50, 40]
      this.pillarData3.series[2].data = [30, 70, 60]
    },
    rollText() {
      let speed = 280
      let that = this
      let tmpHi = 0

      function Marquee() {

        if (that.$refs.tableContent20) {
          tmpHi = that.$refs.tableContent20.scrollTop++
          if (tmpHi === that.$refs.tableContent20.scrollTop) {
            that.$refs.tableContent20.scrollTop = 0
          }
        }

        if (that.$refs.tableContent21) {
          tmpHi = that.$refs.tableContent21.scrollTop++
          if (tmpHi === that.$refs.tableContent21.scrollTop) {
            that.$refs.tableContent21.scrollTop = 0
          }
        }

        if (that.$refs.tableContent22) {
          tmpHi = that.$refs.tableContent22.scrollTop++
          if (tmpHi === that.$refs.tableContent22.scrollTop) {
            that.$refs.tableContent22.scrollTop = 0
          }
        }

        if (that.$refs.tableContent23) {
          tmpHi = that.$refs.tableContent23.scrollTop++
          if (tmpHi === that.$refs.tableContent23.scrollTop) {
            that.$refs.tableContent23.scrollTop = 0
          }
        }

        if (that.$refs.tableContent24) {
          tmpHi = that.$refs.tableContent24.scrollTop++
          if (tmpHi === that.$refs.tableContent24.scrollTop) {
            that.$refs.tableContent24.scrollTop = 0
          }
        }

      }

      setInterval(Marquee, speed) //设置定时器
    }
  },
  created() {
    this.reloadWeb()
    this.initData()
    this.initWebData()
  },
  mounted() {
    this.rollText()
  },
  destroyed() {
    closeWebsocket()
  }
}
</script>

<style lang="scss" scoped>
.container4 {
  background-image: url("../../assets/manage_board/06.jpeg");
  background-repeat: no-repeat;
  background-size: cover;
  overflow: hidden;
  position: fixed;
  width: 100%;
  height: 100%;

  .table-content {
    height: 34vh;
    color: #ffffff;
    overflow: hidden;
    margin-top: 0.5rem;

    .table-line:nth-of-type(odd) {
      background: rgba(122, 178, 203, 0.22);
    }

    .table-line:nth-of-type(even) {
      background: rgba(213, 196, 127, 0.22);
    }

    .table-line {
      position: relative;
      border: 1px solid rgba(23, 17, 17, 0.98);
      border-radius: 5px;
      color: cyan;
      margin-top: 0.2rem;
      line-height: 1.4rem;

      .line-cell {
        word-wrap: break-word;
      }
    }

  }
}
</style>
